<template>
  <div class="step">
    <div v-if="flag === true" class="email">
      <p>设置密码</p>
      <input
        type="text"
        class="password"
        @focus="reset"

        placeholder="请输入密码"
        v-model="pwd"
        v-bind:class="{ error: pwdMsg !==''}"

      />
      <div class="tips">{{pwdMsg}}</div>
      <p>确认密码</p>

      <input type="text" @focus="reset"   v-model="ppwd" placeholder="请输入密码"  v-bind:class="{ error: ppwdMsg !==''}"   />
      <div class="tipbottom">{{ppwdMsg}}</div>
      <div class="next" @click="next">确定</div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      // time: 60,
      flag: true,
      timer: null,
      ppwd: '',
      pwd: '',
      pwdMsg: '',
      ppwdMsg: ''
    }
  },

  created () {
    // this.timer = setInterval(() => {
    //   this.time--
    // }, 1000)
    // // console.log(sessionStorage.getItem('email'))
  },
  methods: {
    next () {
      this.validation()
      // console.log(this.pwd, this.ppwd)
      if (this.pwd && this.ppwd) {
        this.$store.dispatch('user/setNewPwdData', { email: sessionStorage.getItem('email'), pwd: this.pwd, ppwd: this.ppwd }).then(res => {
          this.$emit('next')
        }).catch(res => {
          // console.log(res)
          // console.log(res.message)
          if (res.message.indexOf('不一致') !== -1) {
            this.pwdMsg = ''
            this.ppwdMsg = res.message
          } else {
            const arr = res.data.split(',')
            // console.log(arr)

            if (arr.length === 3) {
              this.pwdMsg = arr[0]
              this.ppwdMsg = arr[1]
            } else if (arr.length === 2) {
              this.ppwdMsg = arr[0]
              this.pwdMsg = ''
            }
          }
        })
      }

      // this.$emit('next')
      clearInterval(this.timer)
    },
    reset () {
      this.ppwdMsg = ''
      this.pwdMsg = ''
    },
    validation () {
      // console.log(this.pwd, 1)
      if (!this.pwd) {
        this.pwdMsg = '请输入密码'
      } else {
        this.pwdMsg = ''
        if (!this.ppwd) {
          this.ppwdMsg = '请再次输入密码'
        } else {
          this.ppwdMsg = ''
        }
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.step {
  overflow: hidden;
  text-align: center;
  p {
    display: block;
    height: 22px;
    line-height: 22px;
    color: #3d4966;
    margin-bottom: 10px;
    text-align: left;
  }
  input {
    width: 360px;
    height: 44px;
    padding-left: 10px;
    opacity: 1;
    background: #ffffff;
    border: 1px solid #a5aebf;
    border-radius: 4px;
  }
  .next {
    width: 360px;
    height: 44px;
    opacity: 1;
    background: #304eec;
    border-radius: 4px;
    line-height: 44px;
    color: #ffffff;
    text-align: center;
  }
  .password {
    margin-bottom: 8px;
  }
  .email {
    display: inline-block;
    margin-top: 272px;

    .tips {
      height: 14px;
      margin-bottom: 8px;
      color: #f05656;
      text-align: left;
    }
    .tipbottom {
      height: 14px;
      margin-top: 8px;
      margin-bottom: 38px;
      color: #f05656;
      text-align: left;
    }
  }
  .content {
      display: inline-block;
    .pic {
      width: 64px;
      height: 64px;
      margin-top: 128px;
      display: inline-block;
      img{
        width: 100%;
      }

    }
    h2 {
      margin-top: 25px;
      font-size: 20px;
      font-weight: 600;
      color: #1b1f35;
      margin-bottom: 60px;
    }
    .next {
      display: inline-block;
      width: 360px;
      height: 44px;
      opacity: 1;
      background: #304eec;
      border-radius: 4px;
      line-height: 44px;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
